<template>
  <div class="user">
    <van-nav-bar :fixed="true" left-arrow @click-left="onClickLeft">
      <template #left>
        <van-icon name="arrow-left" color="#000000" size="22" />
      </template>
      <template #right>
        <van-icon name="ellipsis" color="#000000" size="22" />
      </template>
    </van-nav-bar>
    <div class="content" :style="{minHeight:(fullHeight-46) +'px' }">
      <div
        class="user-box clearfix"
        :style="{backgroundImage: 'url(' + coverImgUrl + ')', backgroundSize:'cover'}"
      >
        <div class="user-info">
          <van-row>
            <van-col span="6">
              <div class="user-img-box">
                <van-image
                  width="60px"
                  height="60px"
                  fit="fill"
                  radius="5"
                  :src="userInfo.userImg"
                />
              </div>
            </van-col>
            <van-col span="18">
              <p class="user-username">{{userInfo.userName}}</p>
            </van-col>
          </van-row>
        </div>
      </div>

      <div class="opt-list">
        <van-cell-group>
          <van-cell title="用户信息" is-link @click="userDetail" />
          <van-cell title="解除好友关系">
            <template #right-icon>
              <van-tag round type="danger" size="medium" @click="deleteUser">删除</van-tag>
            </template>
          </van-cell>
        </van-cell-group>
        <div class="opt-send">
          <van-cell-group>
            <van-cell>
              <template #title>
                <div class="opt-send-box">
                  <van-button
                    style="width: 148px"
                    icon="chat-o"
                    round
                    plain
                    type="primary"
                    size="small"
                    @click="toChat"
                  >发消息</van-button>
                </div>
              </template>
            </van-cell>
          </van-cell-group>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import userBg from "@/assets/user-bg.jpg";
import { mapState, mapActions } from "vuex";

export default {
  name: "User",
  data() {
    return {
      friendId: "",
      userInfo: "",
      coverImgUrl: userBg,
      fullWidth: document.documentElement.clientWidth,
      fullHeight: document.documentElement.clientHeight
    };
  },
  methods: {
    ...mapActions(["asyncSaveChatList"]),
    onClickLeft() {
      this.$router.push("/contact");
    },
    //获取用户信息
    getUserInfo() {
      this.axios
        .get(this.server.BaseUrl + "/user/" + this.friendId)
        .then(res => {
          if (res.data.status) {
            this.userInfo = res.data.data;
          } else {
            this.$toast(res.data.message);
          }
        })
        .catch(err => {
          this.$toast("网络异常");
          console.log(err);
        });
    },
    //删除好友
    deleteUser() {
      this.$dialog
        .confirm({
          message: "是否确定删除好友?",
          showCancelButton: true,
          confirmButtonColor: "#ee0a24",
          confirmButtonText: "删除"
        })
        .then(() => {
          this.$toast("抱歉，未开通权限!");
        })
        .catch(() => {});
    },
    //用户详情
    userDetail() {
      this.$toast("抱歉，未开通权限!");
    },
    /**
     * 动态获取浏览器宽高
     */
    handleResize() {
      this.fullWidth = document.documentElement.clientWidth;
      this.fullHeight = document.documentElement.clientHeight;
    },
    //进入聊天页面
    toChat() {
      //将所有未读消息，变为已读
      let chatList = this.chatList;
      chatList.forEach(element => {
        if (element.friendId == this.friendId) {
          element.count = 0;
          element.msgList.forEach(item => {
            item.read = true;
          });
        }
      });
      this.asyncSaveChatList(chatList);

      this.$router.push({ path: "/chat", query: { userId: this.friendId } });
    }
  },
  computed: {
    ...mapState(["chatList"])
  },
  created() {
    window.addEventListener("resize", this.handleResize);
    this.friendId = this.$route.query.userId;
    //获取用户信息
    this.getUserInfo();
  },
  beforeDestroy: function() {
    window.removeEventListener("resize", this.handleResize);
  }
};
</script>

<style lang="scss" scoped>
.user {
  width: 100%;
  height: 100%;

  .van-nav-bar {
    background-color: #ffffff;
  }

  .content {
    width: 100%;
    margin-top: 46px;
    background-color: #f9f9f9;

    .clearfix::before,
    .clearfix::after {
      content: "";
      display: table;
      clear: both;
    }

    .user-box {
      width: 100%;
      height: 150px;

      .user-info {
        width: 100%;
        height: 60px;
        margin-top: 110px;
        background-color: rgba(0, 0, 0, 0);

        .user-img-box {
          height: 60px;
          width: 60px;
          margin: auto;
          border-radius: 5px;
        }

        .user-username {
          margin-top: 10px;
          margin-bottom: 0;
          font-size: 24px;
          font-weight: 500;
        }
      }
    }

    .opt-list {
      width: 100%;
      margin-top: 57px;

      .opt-send {
        margin-top: 20px;

        .opt-send-box {
          text-align: center;
        }
      }
    }
  }
}
</style>